<template>
  <view class="apply_bank_qrcode_step2">
    <steps :active="2"></steps>
    <view class="cut-line"></view>
    <scroll-view class="scroll-wrap" :scroll-y="true" :style="{height: (safeHeight - safeWidth / 375 * (101 + 64 + 11)) + 'px'}">
      <view class="form-wrap">
        <form>
          <view class="form-item-upload-wrap">
            <view class="form-item-head">
              <view class="title">
                营业执照
              </view>
              <view class="sample" @click="previewImg(1)">
                <text>示例</text>
              </view>
            </view>
            <view class="form-item-content" style="display: flex;">
              <view class="common-img-wrap" @click="uploadFile(1)">
                <view class="no-upload-img" v-if="!data.businessLicenseFileId || !data.businessLicenseFileUrl">
                  <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                  <view class="text">
                    上传营业执照
                  </view>
                </view>
                <view class="upload-img-wrap" v-else>
                  <image :src="data.businessLicenseFileUrl" mode="" class="upload-img"></image>
                </view>
              </view>
              <view class="hint">
                <text>注：拍摄时请确保证件</text>
                <text class="attention">边框完整，字体清晰，亮度均匀</text>
              </view>
            </view>
          </view>
        </form>
      </view>
    </scroll-view>
    
    <view class="qrcode_selected_platform-footer">
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="submitInfo" v-if="status == null || status == 0 || status == 3">下一步</button>
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="nextStep" v-else>下一步</button>
    </view>
  </view>
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import steps from '../common/bankSteps.vue'
import { getDistrict } from '@/service/common/city.service.js'
import { multiDistrict, uploadFile, checkImage } from '@/unit/common.js'
import { getLicenseInfoSyncApi, saveLicenseInfoApi, getSubmitLicenseInfoApi, getStepStatusApi } from '@/service/qrCode/qrCode.service.js'
import { discernCharterApi, discernCardApi } from '@/service/common/common.service.js'
export default {
  components: {
    steps
  },
  data () {
    return {
      status: null,
      data: {
        storeCollectId: null,
        businessLicenseFileId: null, // 营业执照ID
        businessLicenseFileUrl: null // 营业执照地址
      }
    }
  },
  computed: {
    isDisabled: function () {
      return this.status == 1 || this.status == 2;
    }
  },
  mounted () {},
  methods: {
    previewImg (type) { // 查看示例图片
      switch (type) {
      case 1:
        checkImage([this.$store.state.imgBaseUrl + '/esg_img/s-1.png'], 0);
        break;
      default:
      }
    },
    getStepStatus () {
      getStepStatusApi({}, res => {
        if (res.status == 0) {
          this.status = res.data.status;
          this.data.storeCollectId = res.data.id;
          if (res.data.qualificationStatus == 1) {
            this.getInfo(res.data.id);
          } else {
            this.init();
          }
        }
      });
    },
    getInfo (id) {
      getSubmitLicenseInfoApi({id: id}, res => {
        if (res.status == 0) {
          let info = res.data;
          info.businessLicenseFileId = info.businessLicenseFile.id;
          info.businessLicenseFileUrl = info.businessLicenseFile.url;
          delete info.businessLicenseFile;
          this.data = info;
        }
      }, null, {showErrorMsg: true});
    },
    uploadFile (type) {
      if (this.status == 1 || this.status == 2) {
        return false;
      }
      uploadFile({
        success: (res) => {
          switch (type) {
          case 1:
            discernCharterApi({
              isFace: 0,
              appliedType: 2,
              url: res.data.url,
              id: res.data.id
            }, (callback) => {
              if (callback.status == 0) {
                this.data.enterpriseName = callback.data.name; //
                this.data.mainBusiness = callback.data.business; //  
                this.data.enterpriseAddress = callback.data.address; //  
                this.data.creditCode = callback.data.regNum; // 
                this.data.licenseValidity = callback.data.validPeriod; //
                this.data.businessLicenseFileId = res.data.id;
                this.data.businessLicenseFileUrl = res.data.url;
              } else {
                uni.showToast({
                  title: callback.msg,
                  icon: 'none'
                })
              }
            });
            break;
          default:
          }
        }
      });
    },
    nextStep () {
      uni.navigateTo({
        url: '/pages/qrCode/applyBank/step3'
      }, 1500)
    },
    submitInfo () {
      let rule = [
        {name:'businessLicenseFileUrl', checkType : 'notnull', checkRule: '',  errorMsg: '请上传合法的营业执照照片'},
      ];
      var checkRes = formValid.check(this.data, rule);
      if (checkRes) {
        let params = Object.assign(this.data);
        delete params.businessLicenseFileUrl;
        saveLicenseInfoApi(this.data, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '上传营业执照成功！',
              success: () => {
                setTimeout(function () {
                  uni.navigateTo({
                    url: '/pages/qrCode/applyBank/step3'
                  }, 1500)
                })
              }
            })
          }
        }, null, {showErrorMsg: true});
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    },
    async init (option) {
      let info = await getLicenseInfoSyncApi({});
      if (info) {
        this.data.enterpriseName = info.name; //
        this.data.mainBusiness = info.business; //  
        this.data.enterpriseAddress = info.address; //  
        this.data.creditCode = info.regNum; // 
        this.data.licenseValidity = info.validPeriod; //
        this.data.businessLicenseFileId = info.fileId;
        this.data.businessLicenseFileUrl = info.fileUrl;
      }
    }
  },
  mounted () {
    this.getStepStatus();
  },
  onShow () {
    // 
  },
  onLoad (option) {
    // this.init(option);
  }
}
</script>

<style lang="scss" scoped>
  .apply_bank_qrcode_step2 {
    position: relative;
    min-height: calc(100vh);
    background-color: #FFFFFF;
    .cut-line {
      height: 22rpx;
      background-color: #FAFAFA;
    }
    .scroll-wrap {
      height: calc(100vh - 62px - 101px);
    }
    .form-wrap {
      // margin-top: 20rpx;
      background: #FFFFFF;
      .self-border-bottom {
        border-bottom: 1rpx solid #E1E1E1;
      }
      .self-margin-top {
        margin-top: 22rpx;
      }
      .cut-line {
        height: 22rpx;
        background-color: #FAFAFA;
      }
      
      .pick-value {
        color: #999999;
        font-size: 24rpx;
      }
      .form-item {
        display: flex;
        width: 718rpx;
        // justify-content: center;
        align-items: center;
        margin-left: 32rpx;
        // height: 100rpx;
        padding: 36rpx 0;
        
        .form-item-label {
          width: 140rpx;
          text-align: left;
          padding: 0 32rpx 0 0;
          font-size: 28rpx;
          color: #333333;
          font-weight:500;
        }
        .form-item-input {
          font-size: 24rpx;
          height: 38rpx;
          color: #999999;
          flex: 1;
          .input-placeholder {
            color: #999999;
          }
        }
        .form-item-pick {
          flex: 1;
        }
        .arrow {
          margin-right: 33rpx;
          border-right: 3rpx solid #8A8A8A;
          border-top: 3rpx solid #8A8A8A;
          height: 18rpx;
          width: 18rpx;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
          border-left: 2rpx solid transparent;
          border-bottom: 2rpx solid transparent;
        }
        .no-arrow {
          margin-left: 64rpx;
        }
      }
      
      .form-item-upload-wrap {
        background-color: #FFFFFF;
        padding: 0 34rpx 22rpx;
        .form-item-head {
          overflow: hidden;
          padding-top: 40rpx;
          .title {
            float: left;
            color: #333333;
            font-size: 36rpx;
          }
          .sample {
            float: right;
            text {
              color: #FF7473;
              font-size: 28rpx;
              text-decoration: underline;
            }
          }
          &:after {
            clear: both;
          }
        }
        .form-item-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          .common-img-wrap {
            margin-top: 30rpx;
            width: 300rpx;
            height: 400rpx;
            border: 1px dashed #E1E1E1;
            border-radius: 16rpx;
           
            .no-upload-img {
              width: 100%;
              height: 100%;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              .img {
                width: 80rpx;
                height: 80rpx;
              }
              .text {
                line-height: 40rpx;
                margin-top: 29rpx;
                color: #666666;
                font-size: 24rpx;
                font-weight:500;
              }
            }
            
            .upload-img-wrap {
              width: 100%;
              height: 100%;
              position: relative;
              .upload-img {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
              .close {
                position: absolute;
                width: 32rpx;
                height: 32rpx;
                top: -20rpx;
                right: -20rpx;
                image {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .hint {
            margin-top: 32rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333
          }
          
          .attention {
            color: #C2AC78
          }
        }
      }
      
      .tip {
        font-size: 22rpx;
        font-family:PingFang SC;
        color: #999999;
        margin-left: 10rpx;
      }
    }
    
    .qrcode_selected_platform-footer {
      position: absolute;
      bottom: 0rpx;
      left: 0rpx;
      width: 100%;
      height: 125rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1rpx solid #E1E1E1;
      background: #FFFFFF;
      .qrcode_selected_platform-footer-btn {
        width: 687rpx;
        height: 90rpx;
        line-height: 90rpx;
        background-color: #434343;
        color: #F6DA99;
        font-size: 30rpx;
      }
    }
    
  }
</style>
